<template>
  <div class="hr-container">
    <MapView @mapLoad="mapLoad" :center="center" :zoom="zoom"></MapView>
    <div class="bg">
		  <HeadBox title="人力资源"></HeadBox>

      <div class="main">
        <el-col :span="4">
          <ItemWrap style="height: 86vh;" title="城市体征">
            <div style="">
              <div class="subTit">
                <span class="line"></span>
                <span class="tit">城市概况</span>
              </div>
              <div>
                <el-row>
                  <el-col :span="7" :offset="1" v-for="(item, index) in list1" :key="index" class="common_item">
                    <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
                      <!-- <div style="flex: 1"><i class="el-icon-user-solid" style="color: #389ECB;"></i></div> -->
                      <div class="cont">
                        <div class="name">{{ item.title }}</div>
                        <div>
                          <span class="num">{{ item.count }}</span>
                          <span class="unit">{{ item.unit }}</span>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </el-col>
                </el-row>
              </div>
              <div class="subTit">
                <span class="line"></span>
                <span class="tit">城市建设</span>
              </div>
              <div>
                <el-row>
                  <el-col :span="7" :offset="1" v-for="(item, index) in list2" :key="index" class="common_item">
                    <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
                      <div class="cont">
                        <div class="name">{{ item.title }}</div>
                        <div>
                          <span class="num">{{ item.count }}</span>
                          <span class="unit">{{ item.unit }}</span>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </el-col>
                </el-row>
              </div>
              <div class="subTit">
                <span class="line"></span>
                <span class="tit">社会治理</span>
              </div>
              <div>
                <el-row>
                  <el-col :span="7" :offset="1" v-for="(item, index) in list3" :key="index" class="common_item">
                    <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
                      <div class="cont">
                        <div class="name">{{ item.title }}</div>
                        <div>
                          <span class="num">{{ item.count }}</span>
                          <span class="unit">{{ item.unit }}</span>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </el-col>
                </el-row>
              </div>
              <div class="subTit">
                <span class="line"></span>
                <span class="tit">社区养老</span>
              </div>
              <div>
                <el-row>
                  <el-col :span="7" :offset="1" v-for="(item, index) in list4" :key="index" class="common_item">
                    <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
                      <!-- <div style="flex: 1"><i class="el-icon-user-solid" style="color: #389ECB;"></i></div> -->
                      <div class="cont">
                        <div class="name">{{ item.title }}</div>
                        <div>
                          <span class="num">{{ item.count }}</span>
                          <span class="unit">{{ item.unit }}</span>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </el-col>
                </el-row>
              </div>
            </div>
          </ItemWrap>
        </el-col>
        <el-col :span="4">
          <ItemWrap style="height: 42vh;" title="企业证照类型统计">
            <hr-echarts1 />
          </ItemWrap>
          <ItemWrap style="height: 41.5vh; margin-top: 20px" title="企业经营范围分类">
            <hr-echarts2 />
          </ItemWrap>
        </el-col>
        <el-col :span="4" :offset="7">
          <ItemWrap style="height: 37vh;" title="企业成立情况统计">
            <hr-echarts3 />
          </ItemWrap>
          <ItemWrap style="height: 46.5vh; margin-top: 20px" title="注册资本情况统计">
            <hr-echarts4 />
          </ItemWrap>
        </el-col>
        <el-col :span="4">
          <ItemWrap style="height: 86vh;" title="产业+人才">
            <div class="subTit">
              <span class="line"></span>
              <span class="tit">企业经济指标</span>
            </div>
            <div class="zbzszxBox">
              <dv-scroll-board :config="config" style="height: 150px" />
            </div>
            <div class="subTit">
              <span class="line"></span>
              <span class="tit">学历分析</span>
            </div>
            <div style="text-align: center">
              <dv-active-ring-chart :config="chartConfig" style="height: 185px" />
            </div>
            <div class="subTit">
              <span class="line"></span>
              <span class="tit">院区概况</span>
            </div>
            <el-row>
              <el-col :span="7" :offset="1" v-for="(item, index) in yqgkList" :key="index" class="common_item">
                <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
                  <div class="cont">
                    <div class="name">{{ item.title }}</div>
                    <div>
                      <span class="num">{{ item.count }}</span>
                      <span class="unit">{{ item.unit }}</span>
                    </div>
                  </div>
                </dv-border-box-7>
              </el-col>
            </el-row>
          </ItemWrap>
        </el-col>
      </div>
    </div>

    
    <div id="maptools" style="left: 36%">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox
                  v-model="item.isCheck"
                  @change="changeCheckBox($event, item.name)"
                /><span>{{ item.name }} {{ item.num }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>

		<info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
			<info-window-item label="企业名称：" :value="detail.name"></info-window-item>
			<info-window-item label="地址：" :value="detail.address"></info-window-item>
			<info-window-item label="成立时间：" :value="detail.foundDate.substring(0, 10)"></info-window-item>
			<info-window-item label="经营范围：" :value="detail.business"></info-window-item>
		</info-window>
  </div>
</template>

<script>
import MapView from '@/components/map-container/index.vue'
import InfoWindow from "@/components/info-window/index.vue";
import InfoWindowItem from "@/components/info-window/item.vue";

import HrEcharts1 from '@/views/hr/echarts/hr-echarts1.vue'
import HrEcharts2 from '@/views/hr/echarts/hr-echarts2.vue'
import HrEcharts3 from '@/views/hr/echarts/hr-echarts3.vue'
import HrEcharts4 from '@/views/hr/echarts/hr-echarts4.vue'

var timer
export default {
  name: 'human-resources',
  components: {
    MapView,
		InfoWindow,
		InfoWindowItem,
    HrEcharts1,
    HrEcharts2,
    HrEcharts3,
    HrEcharts4
  },
  data() {
    return {
      marklist: [],
      top: 60,
      center: [120.432652, 36.145987],
      zoom: 17, // 地图放大比例
      
      mapDropdownList: [{	
        isCheck: true,
        typeId: "'1'",
        name: '人力资源服务',
        nums: ''
      }, {	
        isCheck: true,
        typeId: "'2'",
        name: '企业管理咨询',
        nums: ''
      }],
      showDetail: false,
      detail: {},
      list1: [
        { title: "辖区面积", count: "99.9", unit: "" },
        { title: "街道总数", count: "11", unit: "个" },
        { title: "社区总数", count: "128", unit: "个" },
        { title: "小区总数", count: "481", unit: "个" },
        { title: "房屋总数", count: "269952", unit: "" },
        { title: "人口总数", count: "737281", unit: "人" }
      ],
      list2: [
        { title: "企业总数", count: "35283", unit: "个" },
        { title: "个体户", count: "113241", unit: "个" },
        { title: "社会组织", count: "571", unit: "" },
        { title: "园区总数", count: "18", unit: "个" },
        { title: "人才存量", count: "127947", unit: "人" },
        { title: "职工参保", count: "100710", unit: "人" }
      ],
      list3: [
        { title: "网格人口", count: "702536", unit: "人" },
        { title: "重点关注对象", count: "2748", unit: "人" },
        { title: "重点单位", count: "294", unit: "个" },
        { title: "帮扶对象", count: "1833", unit: "人" },
        { title: "网格房屋", count: "410702", unit: "" },
        { title: "网格员总数", count: "934", unit: "" }
      ],
      list4: [
        { title: "养老机构服务老人", count: "2288", unit: "人" },
        { title: "社区居家服务对象", count: "4820", unit: "人" },
        { title: "总服务次数", count: "9880", unit: "次" },
        { title: "社区活动", count: "9", unit: "" },
        { title: "居民服务", count: "42486", unit: "" },
        { title: "智能摄像头", count: "30", unit: "个" }
      ],
      yjzyList: [ // 应急资源数据
        { title: "仓库数", count: "16", unit: "处" },
        { title: "物资数", count: "21.7", unit: "万件" },
        { title: "物资种类", count: "115", unit: "种" },
        { title: "应急队伍", count: "14", unit: "支" },
        { title: "应急队员", count: "118", unit: "人" },
        { title: "应急装备", count: "11", unit: "个" },
        { title: "消防救援中队", count: "5", unit: "支" },
        { title: "应急管理服务站", count: "17", unit: "个" },
        { title: "微型消防站", count: "67", unit: "个" }
      ],
      czllList: [
        {
          title: "镇街指挥站 >",
          dataList: [
            { title: "镇街指挥站", count: "11", unit: "个" },
            { title: "镇街指挥站", count: "26/162", unit: "人" }
          ]
        }, {
          title: "村社联勤联动站 >",
          dataList: [
            { title: "联村社动站", count: "11", unit: "个" },
            { title: "保障力量（值班/总）", count: "426/1162", unit: "人" }
          ]
        }, {
          title: "全科网络 >",
          dataList: [
            { title: "网络", count: "3123", unit: "个" },
            { title: "保障力量（值班/总）", count: "1728/2901", unit: "人" }
          ]
        }
      ],
      config: {
        header: ['<span style="color: #fff; font-weight: 700">企业</span>', '<span style="font-weight: 700">营业额</span>'],
        headerHeight: 35,
        headerBGC: '#202D5A', // 表头0f1325
        oddRowBGC: '#202D5A', // 奇数行
        evenRowBGC: '#193670', // 偶数行
        // index: true,
        // columnWidth: [200, 100],
        align: ['center', 'center'],
        // header: [ "部门/街道", "姓名" ],
        data: [
          [ "规上工业总产值", "407.1亿元" ],
          [ "规上服务业营业收入", "78.988亿元" ],
          [ "社会消费品零售总额", "448.62亿元" ],
          [ "限额以上企业完成零售额", "120.27亿元" ],
          [ "限额以上批发零售和住宿餐饮业销售额", "965.09亿元" ],
          [ "批发业", "825.022亿元" ],
          [ "住宿业", "2.42亿元" ],
          [ "餐饮", "3.14亿元" ],
        ]
      },
      chartConfig: {
        radius: '67%',
        activeRadius: '78%',
        data: [
          {
            name: '博士研究生',
            value: 1596
          },
          {
            name: '硕士研究生',
            value: 7230
          },
          {
            name: '大学本科',
            value: 53512
          },
          {
            name: '大学专科',
            value: 32217
          }
        ],
        digitalFlopStyle: {
          fontSize: 20
        },
        activeTimeGap: 3500,
        showOriginValue: true
      },
      yqgkList: [
        { title: "园区总产值", count: "480", unit: "亿元" },
        { title: "投资额", count: "306", unit: "亿元" },
        { title: "入驻企业", count: "545", unit: "家" },
        { title: "重点项目", count: "45", unit: "个" },
        { title: "全区面积", count: "95.5", unit: "平方千面" },
        { title: "园区楼宇", count: "452", unit: "栋" },
        { title: "总入住率", count: "72", unit: "%" },
        { title: "解决就业", count: "4.5", unit: "万人" }
      ]
    }
  },
  mounted() {
  },
  methods: {
	  // 初始化地图
    mapLoad(amap) {
      this.map = amap
      // this.map = new AMap.Map('container', {
      //   pitch: 10,
      //   rotation: -30,
      //   zoom: this.zoom
      // })
      this.getPoints("'1', '2'");

      let _this = this
      AMap.plugin('AMap.DistrictSearch', function () {
        var district = new AMap.DistrictSearch({
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 区 
          level: 'district'
        })

        // district.search('李沧区', function(status, result) {
        //   // 获取朝阳区的边界信息
        //   var bounds = result.districtList[0].boundaries

        //   var polygons = []
        //   if (bounds) {
        //     for (var i = 0, l = bounds.length; i < l; i++) {
        //       //生成行政区划polygon
        //       var polygon = new AMap.Polygon({
        //         map: _this.map,
        //         strokeWeight: 1,
        //         path: bounds[i],
        //         fillOpacity: 0.4,
        //         fillColor: '#80d8ff',
        //         strokeColor: '#0091ea'
        //       })
        //       polygons.push(polygon)
        //     }
        //   }

        //   _this.map.add(polygons)
        //   // 地图自适应
        //   _this.map.setFitView(polygons); // 视口自适应
        // })
      })

    },

    // 获取点位
    getPoints(val) {
      this.$get('/humanresources/queryPoint', {
        businessType: val
      }).then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        
        // 	打印调用成功回调
        if (this.marklist) {
          this.map.remove(this.marklist);
          this.marklist = []
        }

        res.data.data.map((item) => {
          // 创建marker点位标记
          var icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(90, 90),
            // 图标的取图地址
            // image: 'https://xcdx.nyntcl.com/bs.png',
            image: item.businessType === '1' ? './icon-hr.png' : './icon-qyzxgl.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(40, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.lng, item.lat),
            icon: icon,
            offset: new AMap.Pixel(-17, -35)
          });
          
          marker.setClickable(true)
          
          // 点击点位查看详情
          marker.on('click', () => {
            this.detail = item
            this.showDetail = true  
          })
          this.marklist.push(marker)
        })
        this.map.add(this.marklist)
      })
    },
    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = "block";
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = "none";
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn();
      } else {
        this.map.zoomOut();
      }
    },
    // 监听复选框
    changeCheckBox(val) {
      let arr1 = [], arr2 = []
      arr1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      arr2 = arr1.map((i) => {
        return `${i.typeId}`
      })
      this.getPoints(arr2.join(','));
    },
  }
}
</script>

<style lang="less" scoped>

.bg {
  // background-color: #03112B;
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // width: 2280px;
  // height: 810px;
  pointer-events: none;
  z-index: 997;
}
.main {
  display: flex;
  padding: 90px 14px 0;
  justify-content: space-between;
  height: 80vh;
}

#maptools {
  .menu-drop-wrap {
    height: auto;
  }
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}

.subTit {
  text-align: left;
  margin: 5px;
  .line {
    width: 8px;
    height: 17px;
    background-color: #1779AC;
    display: inline-block;
    margin-right: 10px;
  }

  .tit {
    font-size: 24px;
    color: #FEFEFE;
  }
}

.common_item {
  :deep(.border-box-content) {
    box-sizing: border-box;
    display: flex;
    padding: 6px 10px 0px;
  }
  margin-bottom: 10px;
  height: 48px;

  .cont {
    flex: 5;
    position: relative;
    bottom: 5px;

    .name {
      color: #C0C0C0;
      font-size: 13px;
    }
    .num {
      font-size: 18px;
      color: #FFFFFF;
    }
    .unit {
      font-size: 13px;
      color: #BFBFBF;
    }
  }
}

// .czllBox {
//   .tit {
//     color: #23D5D7;
//     text-align: left;
//     padding: 0 0 5px 15px;
//   }
//   .common_item {
//     .cont {
//       .name {
//         color: #3D8BD2;
//       }
//     }
//   }
// }
</style>
